<template>
    <view class="goods-card" @click="goDetail(cardData.id)">
        <image :src="cardData.picture" mode="widthFix"></image>
        <view class="desc">
            <view class="title">{{ cardData.name }}</view>
            <view class="price">
                <text>￥</text>
                <text>{{ cardData.price }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        cardData: Object
    },
    data() {
        return {}
    },
    methods: {
        goDetail(id) {
            uni.navigateTo({
                url: '/pages/detail/detail?id=' + id
            })
        }
    }
}
</script>

<style scoped lang="scss">
.goods-card {
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    background-color: white;
    font-size: 24rpx;
    color: #333333;

    image {
        width: 100%;
    }

    .desc {
        padding: 10rpx 20rpx;

        .title {
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 10rpx;
        }

        .price {
            color: #CD4444;

            text:first-child {
                font-size: 18rpx;
            }

            text:last-child {
                font-size: 22rpx;
            }
        }
    }
}
</style>
